<template>
  <div>
    <p>{{ value }}</p>
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      :unlink-panels="true"
    />
    <p>{{ value2 }}{{ value3 }}</p>
    <el-form label-width="80px" :inline="true">
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="value2"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          :picker-options="startOptions"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="value3"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          :picker-options="endOptions"
        />
      </el-form-item>
    </el-form>
    <el-button @click="test">test</el-button>
  </div>
</template>

<script>
export default {
  name: 'datePicker',
  data() {
    return {
      value: '',
      value2: '',
      value3: '',
      startOptions: this.disabledStartDate(),
      endOptions: this.disabledEndDate()
    }
  },
  methods: {
    test() {
      console.log(new Date(this.value2.replace(/-/g, '/')).getTime())
    },
    disabledStartDate() {
      const _this = this
      return {
        disabledDate(time) {
          if (_this.value3) {
            return time.getTime() > new Date(_this.value3.replace(/-/g, '/')).getTime()
          } else {
            return false
          }
        }
      }
    },
    disabledEndDate() {
      const _this = this
      return {
        disabledDate(time) {
          if (_this.value2) {
            return time.getTime() < new Date(_this.value2.replace(/-/g, '/')).getTime()
          } else {
            return false
          }
        }
      }
    }
  }
}
</script>

<style>

</style>
